vue插入图片的方法：首先创建一个static文件夹用来保存图片；然后写点击事件，代码为【url:'/api/api/add/'】；最后在后端获取数据。

本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

vue插入图片的方法：

首先开始创建一个static文件夹用来保存图片

去 setting 里面进行配置

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

#前面大写的是死格式，尽量不要写错

一级路由里面写

re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT})

在vue中的templates里这样写

<div> 姓名：<input type="text" v-model="name"><br> 图片：<input type="file" id="img"><br> #这个ID是下面用来获取它的属性值的 <button @click='my_add()'>添加</button> </div>

接下来我们就该写点击事件了 （这里用到了FormData：不了解的可以去它的官网去查一查：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData）

methods:{ my_add:function(){ let form_data = new FormData(); #实例化一个FormData form_data.append('name',this.name); #把数据添加到这个实例中 let img = document.getElementById('img').files[0]; #获取id的属性 form_data.append('img',img); #把图拍片名称添加到这个实例中 this.axios({ url:'/api/api/add/', #连接后台接口 第一个api是跨域的配置，第二个api是我的后台一级路由 method:'post', #用post方法进行提交数据 headers:{'Content-Type':'multipart/form-data'}, #'Content-Type': 'multipart/form-data' ：指定传输数据为二进制数据，例如图片、mp3、文件 data:form_data, }).then(res=>{ if(res.data.code==200){ alert(res.data.message) #这是code等于200的时候打印的 } else{ alert(res.data.message) #这是code等于其他值 的时候打印的 } }).catch(err=>{ console.log(err) #把错误警告提交到console }) } }

后端获取数据

name = request.data.get('name') #获取页面上输入的名字 img = request.FILES.get('img') #获取页面上添加的图片 img_name = img.name #取出文件的名字 img_path = 'static/upload/' + img_name #给图片名字前面拼接上路径 这就是它的路径 with open(img_path,'wb') as f: #循环写入文件‘wb’ for k in img.chunks(): #避免文件太大，就把它分成块写入 f.write(k)

相关学习推荐：